<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="UTF-8">
    <title>权限管理</title>
    <script type="text/javascript" src="/mes/static/js/vue.js"></script>
    <script type="text/javascript" src="/mes/static/js/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="/mes/static/js/index.css">
    <!-- 引入组件库 -->
    <script src="/mes/static/js/index.js"></script>
</head>
<body>

<div id="power" >
    <el-input
            style="width:200px;"
            placeholder="请输入名称"
            v-model="customerName"
            clearable>
    </el-input>
    <el-table
            :data="tableData1"
            style="width: 100%"
            row-key="id"
            border
            lazy
            :load="load"
    >
        <el-table-column
                prop="date"
                label="日期"
                width="180">
        </el-table-column>
        <el-table-column
                prop="name"
                label="姓名"
                width="180">
        </el-table-column>
        <el-table-column
                prop="address"
                label="地址">
        </el-table-column>
    </el-table>
</div>



</body>
<script>
    var vm=new Vue({
        el:"#power",
        data:{
            value:'',
            options:[],
            down:[],
            checked:[],
            opened:[],
            data2: [],
            defaultProps: {
                children: 'children',
                label: 'label',
                id:1000,
            }
        },
        methods:{
            load(tree, treeNode, resolve) {
                resolve([
                    {
                        id: 31,
                        date: '2016-05-01',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1519 弄'
                    }, {
                        id: 32,
                        date: '2016-05-01',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1519 弄'
                    }
                ])
            },
            submit:function(){
                    var a=[]
                for (var i = 0; i <this.$refs.tree.getCheckedNodes(false,true).length ; i++) {
                    a.push(this.$refs.tree.getCheckedNodes(false,true)[i].id)
                }
                axios.post("/mes/log/submitPower",{
                    id:a,
                    role:vm.value
                }).then(function (response) {
                    vm.success();
                    vm.loadingData();
                })
            },
            success:function(){
                    this.$notify({
                        title: '修改成功',
                        message: '权限修改已生效',
                        type: 'success',
                    });
            },
            append(defaultProps) {
                const newChild = { id: id++, label: 'testtest', children: [] };
                if (!data.children) {
                    this.$set(defaultProps, 'children', []);
                }
                data.children.push(newChild);
            },

            remove(node, data) {
                const parent = node.parent;
                const children = parent.data.children || parent.data;
                const index = children.findIndex(d => d.id === data.id);
                children.splice(index, 1);
            },
            //重新加载
            loadingData:function () {
                axios.post("/mes/log/getPower").then(function (response) {
                    for (var i = 0; i < response.data.length; i++) {
                        if( response.data[i].pid==null){
                            a.id=response.data[i].id;
                            a.label=response.data[i].name;
                            for (var j = 0; j <response.data.length;j++) {
                                if(response.data[j].pid==response.data[i].id){
                                    b.id=response.data[j].id;
                                    b.label=response.data[j].name;
                                    a.children.push(b);
                                    b={id:'',label:''}
                                }
                            }
                            vm.data2.push(a);
                            a={id:'',label:'',children:[]}
                        }
                    }

                })
            }
        },
        created:function(){
           axios.post("/mes/log/getPower").then(function (response) {
              for (var i = 0; i < response.data.length; i++) {
                   if( response.data[i].pid==null){
                       a.id=response.data[i].id;
                       a.label=response.data[i].name;
                       for (var j = 0; j <response.data.length;j++) {
                           if(response.data[j].pid==response.data[i].id){
                               b.id=response.data[j].id;
                               b.label=response.data[j].name;
                              a.children.push(b);
                              b={id:'',label:''}
                           }
                       }
                       vm.data2.push(a);
                      a={id:'',label:'',children:[]}
                   }
               }

            })
        }
    })


    /*  var a=[];
      a.push(1);
      vm.opened=a;*/
</script>
</html>